import { CanvasMouseEvent } from "../ch3/Event";
import { Math2D, Vec2 } from "../ch3/Math2d";
import { TestCh5 } from "../ch5/TestApp";

class TestCh6 extends TestCh5 {

    lineStart = Vec2.create(150,150)
    lineEnd = Vec2.create(400,300)
    closePt = Vec2.create();
    _hitted = false;

    dispatchMouseMove(evt:CanvasMouseEvent){
        this._mouseX = evt.canvasPosition.x;
        this._mouseY = evt.canvasPosition.y;

        let mousePt = Vec2.create(this._mouseX,this._mouseY);
        this._hitted = Math2D.projectPointOnLineSegment(
            mousePt,
            this.lineStart,
            this.lineEnd,
            this.closePt
        )
    }

    render() {
        if (this.context2D) {
            //清空画布
            this.context2D.clearRect(
                0, 0,
                this.canvas.width,
                this.canvas.height
            )
            //网格
            this.strokeGrid();

            // this.testDrawVec()
            // this.drawVecFromLine(
            //     this.lineStart,
            //     this.lineEnd,
            //     10,
            //     this.lineStart.toString(),
            //     this.lineEnd.toString()
            // )
            // this.drawMouseLineProjection();
            
            this.fillCircle(
                this._mouseX,
                this._mouseY,
                2,
            )
            // this.drawHitCirlce();
            // this.drawHitLine();
            // this.drawHitRect();

            this.drawHitTriangle();
        }
    }

    drawHitCirlce(){
        // 判定碰撞
        let mousePt = Vec2.create(this._mouseX,this._mouseY)
        let circleCenter = Vec2.create(150,150);
        let isHit = Math2D.isPointInCircle(mousePt,circleCenter,50);
        let color = isHit ? "red" : "black";
        this.fillCircle(150,150,50,color);
    }

    drawHitLine(){
        let mousePt = Vec2.create(this._mouseX,this._mouseY)
        let startPoint = Vec2.create(10,10);
        let endPoint = Vec2.create(150,150)
        let isHit = Math2D.isPointOnLineSegment(
            mousePt,
            startPoint,
            endPoint
        );
        let color = isHit ? "red" : "black";
        if(this.context2D){
            this.context2D?.save();
            this.context2D.strokeStyle = color;
            this.strokeLine(
                startPoint.x,startPoint.y,
                endPoint.x,endPoint.y,
                )
            this.context2D.restore()
        }
    }
    drawHitRect(){
        let rectLeftTop = Vec2.create(100,200)
        let w = 100,h = 100;
        let isHit = Math2D.isPointInRect(
            this._mouseX,
            this._mouseY,
            rectLeftTop.x,
            rectLeftTop.y,
            w,h
        );
        let color = isHit ? "red" : "black";
        this.fillRectWithTitle(
            rectLeftTop.x,
            rectLeftTop.y,
            w,h,
            '',
            color
        )
    }

    drawHitEllipse(){
        let isHit = false;
        let color = isHit ? "red" : "black";
        
    }

    drawHitTriangle(){
        let mousePt = Vec2.create(this._mouseX,this._mouseY)
        let v0 = Vec2.create(50,10);
        let v1 = Vec2.create(100,10)
        let v2 = Vec2.create(180,200)
        let v3 = Vec2.create(20,200);
        let v4 = Vec2.create(10,100);

        // let isHit = Math2D.isPointInTriangle(
        //     mousePt,
        //     v0,v1,v2
        // );
        let isHit = Math2D.isPointInPolygon(
            mousePt,
            [v0,v1,v2,v3,v4]
        );
        let color = isHit ? "red" : "black";

        if(this.context2D){
            this.context2D.save();
            this.context2D.fillStyle = color;
            
            this.context2D.beginPath();
            this.context2D.moveTo(v0.x,v0.y)
            this.context2D.lineTo(v1.x,v1.y)
            this.context2D.lineTo(v2.x,v2.y)
            this.context2D.lineTo(v3.x,v3.y)
            this.context2D.lineTo(v4.x,v4.y)
            this.context2D.fill();

            this.context2D.restore()
        }

    }

    drawMouseLineProjection(){
        if(this.context2D != null){
            if(this._hitted){
                let angle = 0;
                let mousePt = Vec2.create(
                    this._mouseX,
                    this._mouseY
                )
                this.context2D.save()

                angle = this.drawVecFromLine(
                    this.lineStart,
                    this.lineEnd,
                    10,
                    this.lineStart.toString(),
                    this.lineEnd.toString(),
                    3,false,true
                )
                this.fillCircle(
                    this.closePt.x,
                    this.closePt.y,
                    5
                )
                this.drawVecFromLine(
                    this.lineStart,
                    mousePt,
                    10,
                    '','',
                    1,true,true,false
                )
                this.drawVecFromLine(
                    mousePt,
                    this.closePt,
                    10,
                    mousePt.toString(),``,
                    1,true,true,false
                )
                this.context2D.restore()

                this.context2D.save();
                    this.context2D.translate(
                        this.closePt.x,
                        this.closePt.y
                    )
                    this.context2D.rotate(angle);
                    this.fillText(
                        this.closePt.toString(),
                        0,0,'black',"center",'top'
                    )
                this.context2D.restore();

                angle = Vec2.getAngle(
                    Vec2.difference(this.lineEnd,this.lineStart),
                    Vec2.difference(mousePt,this.lineStart)
                )
                this.fillText(
                    angle.toFixed(2).toString(),
                    this.lineStart.x+10,
                    this.lineStart.y+10,
                    "black","center",'top'
                )
            }else{
                this.drawVecFromLine(
                    this.lineStart,
                    this.lineEnd,
                    10,
                    this.lineStart.toString(),
                    this.lineEnd.toString(),
                    1,false,true
                )
            }
        }
    }

    testDrawVec() {
        if (this.context2D != null) {
            this.context2D.save();
            this.context2D.translate(
                300, 100
            );
            this.drawVec(
                -150,
                10,
                'start',
                'end',
                1,
                true,
                true
            )
            this.context2D.restore()

        }
    }
    drawVecFromLine(
        start:Vec2,
        end:Vec2,
        arrowLen: number = 10,
        beginText = '',
        endText = '',
        lineWidth = 1,
        isLineDash = false,
        showInfo = true,
        alpha = false
    ){
        let angle = Vec2.getOrientation(start,end,true);
        if(this.context2D !== null){
            let diff = Vec2.difference(end,start);
            let len = diff.length;
            this.context2D.save();
                this.context2D.translate(
                    start.x,
                    start.y
                )
                this.context2D.rotate(angle)
                this.drawVec(
                    len,
                    arrowLen,
                    beginText,
                    endText,
                    lineWidth,
                    isLineDash ,
                    showInfo,
                    alpha
                )
            this.context2D.restore()
        }
        return angle
    }

    drawVec(
        len: number,
        arrowLen: number = 10,
        beginText = '',
        endText = '',
        lineWidth = 1,
        isLineDash = false,
        showInfo = true,
        alpha = false
    ) {
        if (this.context2D != null) {
            if (len < 0) {
                arrowLen = - arrowLen
            }
            this.context2D.save();

            this.context2D.lineWidth = lineWidth;
            if (isLineDash) {
                this.context2D.setLineDash([2, 2])
            }
            if (lineWidth > 1) {
                this.fillCircle(0, 0, 5)
            } else {
                this.fillCircle(0, 0, 3)
            }
            // 绘制向量
            this.context2D.save();
            if (alpha) {
                this.context2D.strokeStyle = 'rgba(0,0,0,0.3)'
            }
            this.strokeLine(0,0,len,0);
            this.context2D.save();
                this.strokeLine(
                    len,0,
                    len - arrowLen,arrowLen
                )
            this.context2D.restore()
            this.context2D.save();
                this.strokeLine(
                    len,0,
                    len - arrowLen,-arrowLen
                )
            this.context2D.restore()
            // 文本
            if(beginText){
                if(len > 0){
                    this.fillText(
                        beginText,
                        0,0,
                        "black",
                        "right",
                        "bottom"
                    )
                }else{
                    this.fillText(
                        beginText,
                        0,0,
                        "black",
                        "left",
                        "bottom"
                    )
                }
            }
            
            len = parseFloat(len.toFixed(2));
            if(endText){

                if(len > 0){
                    this.fillText(
                        endText,
                        len,0,
                        "black",
                        "left",
                        "bottom"
                    )
                }else{
                    this.fillText(
                        endText,
                        len,0,
                        "black",
                        "right",
                        "bottom"
                    )
                }
            }
            this.context2D.restore()
            if(showInfo){
                this.fillText(
                    Math.abs(len).toString(),
                    len*0.5,0,
                    "black","center","bottom"
                )
            }
            this.context2D.restore();
        }
    }

}

export {
    TestCh6
}